<template>
    <el-row class="navigation">
        <el-row v-for="({ name, onClick }, k) in data" :key="k" justify="space-arround" align="middle">
            <Iconfont :name="name" :onClick="onClick" />
            <el-divider direction="vertical" v-if="k < data.length - 1"></el-divider>
        </el-row>
    </el-row>
</template>

<script setup>
    import { reactive, watch } from 'vue'
    import Iconfont from '@/components/core/iconfont.vue'
    import { useStore } from 'vuex'

    const store = useStore()
    const data = reactive([
        {
            name: 'enlarge',
            onClick: enlarge,
        },
        {
            name: 'narrow',
            onClick: narrow,
        },
        {
            name: 'adapt',
            onClick: adapt,
        },
        {
            name: 'undo',
            onClick: undo,
        },
        {
            name: 'redo',
            onClick: redo,
        },
        {
            name: 'download',
            onClick: snapshot,
        },
    ])

    let lf = null
    watch(
        () => store.state.logicFlow.lf,
        (nval) => {
            lf = nval
        }
    )

    function enlarge() {
        return lf.zoom(true)
    }

    function narrow() {
        return lf.zoom(false)
    }

    function adapt() {
        lf.resetZoom()
    }

    function undo() {
        lf.undo()
    }

    function redo() {
        lf.redo()
    }

    function snapshot() {
        lf.getSnapshot()
    }
</script>

<style scoped lang="less">
    @import url('@/common.less');
    .navigation {
        position: fixed;
        top: 50px;
        right: 30px;
        background: white;
        padding: 10px;
        border-radius: 5px;
        box-shadow: @box-shadow;
    }
</style>
